<template>
  <div class="annual-fee-box">
    <dropdown-top></dropdown-top>
    <div class="line-box"></div>
    <div class="bank-card-box">
      <div class="item">
        <span class="span-text">附属卡选择</span>
        <div class="card-right__logo">
          <img src="@icon/arrow-b.png" alt="" />
        </div>
      </div>
    </div>
    <div class="line-box"></div>
    <div class="divider-box">
      <p>达标标准</p>
    </div>
    <div class="standard-box">
      <div class=" s-b s-l-1">
        <p class="top-t">
          <span>{{ total }}</span>
          <span>笔</span>
        </p>
        <p class="bottom-t">截止当前已消费</p>
      </div>
      <div class=" s-b s-r-1">
        <p class="top-t">还差 {{ residue }} 笔</p>
        <p class="bottom-t">{{ date }}前计入</p>
      </div>
    </div>
    <div class="line-box"></div>
    <div class="installment-item">
      <div class="item-box">
        <div class="divs item-left">我的年费</div>
        <div class="divs item-right">
          <p>￥{{ annualfee }}</p>
        </div>
      </div>
      <div class="balance-box">
        您已累计消费{{ total }}笔,免{{ year }}年年费
      </div>
    </div>
    <div class="line-box"></div>
    <div class="tips">
      <p>年费减免优惠政策</p>
      <p>在一个自然年度内，任意消费6笔（任意金额），即可享受免年费优惠。</p>
    </div>
    <div class="staging-box">立即分期</div>
  </div>
</template>

<script>
import { Random } from 'mockjs'
import { globalMethods } from '../common/mixins.js'
import dropdown from '@comp/dropdown'
import dropdownMenu from '@comp/dropdown/dropdownMenu'
import dropdownTop from '@comp/dropdownTop'
export default {
  name: 'annualFee',
  mixins: [globalMethods],
  data() {
    return {
      value1: '6666****8888',
      cardNum: Random.string('number', 16),
      total: Random.natural(10, 100),
      residue: Random.natural(10, 100),
      annualfee: Random.natural(10, 100),
      date: Random.date('yyyy/MM/dd'),
      year: Random.date('yyyy'),
      bankCardList: [
        { cardNumber: '6688****6088' },
        { cardNumber: '6688****6088' },
        { cardNumber: '6688****6088' },
        { cardNumber: '6688****6088' },
      ],
      dropDownFlag: false,
    }
  },
  components: {
    dropdown,
    dropdownMenu,
    dropdownTop,
  },
  created() {
    const formatCard = this.$options.filters['formatCard']
    console.log(formatCard)
  },
  methods: {
    close(e) {
      this.dropDownFlag = e
    },
  },
}
</script>

<style lang="stylus" scoped>
  .dropdown-menu
    top 0
  .annual-fee-box
    display flex
    width 100%
    flex-direction column
    background #F7F7F7
    min-height 100vh
    color #333

    .bank-card-box
      position relative
      background #fff
      font-size 32px

      .item
        display flex
        align-items center
        padding 0 27px 0 33px
        height 90px
        color #333333

        .span-text
          padding 0 16px
          flex 1

          &.active
            color #07B7A0

    .card-right__logo
      width 48px
      height 48px
      display flex
      justify-content center
      margin-left 16px

      img
        width 100%
        height 100%

      .img2
        width 22px
        height 16px

    .line-box
      height 20px
      background #F7F7F7
  .divider-box
    background #fff
    display flex
    color #07B7A0
    font-size 32px
    align-items center
    line-height 24px
    border-color #07B7A0
    border-style solid
    border-width 0
    padding 30px 200px
    p
      position relative
      display flex
      align-items center
      justify-content center
      padding 0 30px
      &:after
        content ''
        position absolute
        width 12px
        height 12px
        border-radius 50%
        left 6px
        background #00B893

      &:before
        content ''
        position absolute
        width 12px
        height 12px
        border-radius 50%
        right 6px
        background #00B893
    &:after
      content ''
      display block
      -webkit-box-flex: 1
      -webkit-flex: 1
      flex: 1
      box-sizing: border-box
      height: 1px
      border-color: inherit
      border-style: inherit
      border-width: 1px 0 0
    &:before
      content ''
      display block
      -webkit-box-flex: 1
      -webkit-flex: 1
      flex: 1
      box-sizing: border-box
      height: 1px
      border-color: inherit
      border-style: inherit
      border-width: 1px 0 0
  .standard-box
    background #fff
    display flex
    justify-content center
    align-items center
    font-size 32px
    padding:30px 0
    .s-b
      display flex
      flex-direction column
      align-items center
      width 100%
      p
        &:last-of-type
          padding-top 30px
          font-size 26px
          color #999
    .s-l-1
      border-right 1px solid #E6E6E6
      .top-t
        color #00B893
        span
          &:first-of-type
            font-size 58px
            margin-right 15px
    .s-r-1
      .top-t
        height 64px
        display flex
        align-items center





  .installment-item
    background #fff
    display flex
    flex-direction column
    font-size 32px
    min-height 90px
    padding 0 30px
    color #333

    .item-box
      height 90px
      display flex
      justify-content space-between
      align-items center
      border-bottom 1px solid #E6E6E6
      .item-right
        display flex
      .right-text
        color #666666
      .discount-box
        margin-left 16px
        font-size 26px
        color #00B893
        display flex
        height 40px
        padding 0 11px
        background #FFFFFF
        border 2px solid #00B893
        border-radius 20px
        align-items center
        justify-content center
    .balance-box
      font-size 28px
      display flex
      align-items center
      justify-content flex-end
      height 64px
      color #666666
      padding 18px 0
.protocol-box
  display flex
  align-items center
  padding 30px 34px
  font-size 28px
  background #f7f7f7
.tips
  background #fff
  font-size 28px
  padding 30px
  p
    line-height 1.5
.staging-box
  display flex
  width 686px
  height 88px
  background #FFA900
  border-radius 8px
  color #fff
  font-size 36px
  align-items center
  justify-content center
  margin 30px auto
</style>
